<template>
  <div>
    <!--顶部导航栏-->
    <Nav />
    <div class="w" v-for="program in programs">
      <!--学习栏目标题-->
      <div v-for="item in program" :key="item.id">
        <div class="learn" v-if="item.id == 0">
          <el-divider content-position="left">
            <span id="s1">{{ item.title }}</span>
          </el-divider>
        </div>
        <!--具体学习内容-->
        <div class="category" v-else>
          <el-row>
            <el-col :span="3" class="el-col" v-for="item1 in item" :key="item.id">
              <el-card :body-style="{ padding: '0px' }" class="el-card">
                <a :href="item1.url">
                  <img :src="item1.img" class="image">
                </a>
                <div class="txt">
                  <span>{{ item1.text }}</span>
                  <div class="bottom clearfix">
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Nav from "../components/Nav";
import Footer from "../components/Footer";
import { programs } from '../websiteData/TrainingProgram_data'

export default {
  name: "TrainingProgram",
  components: {
    Nav,
    Footer
  },
  data() {
    return {
      programs
    }
  }
}
</script>

<style scoped>

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.category {
  width: 84%;
  margin: 0 auto;
  margin-bottom: 50px;
}

.image {
  width: 100%;
  display: block;
  transition: transform .3s;
  cursor: pointer;
}

.image:hover {
  transform: translateY(-6px);

}

.el-divider {
  width: 80%;
}

#s1, #s2, #s3 {
  font-size: 30px;
  position: relative;
  right: 4px;
  top: -4px;
  font-weight: bolder;

}

.learn {
  /*margin: 0 auto;*/
  display: flex;
  justify-content: center;
  margin-top: 80px;

}

.el-col {
  margin-left: 60px;
  margin-top: 20px;
}

.txt {
  padding: 14px;
  display: flex;
  color: #63a35c;
  justify-content: center;
}

#learnid {
  margin-top: 70px;

}

.el-card {

}

.txt span {
  font-weight: bolder;
  font-size: 20px;

}


</style>
